<template>
  <div class="content">
    <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="100px" class="form">
      <el-form-item label="账号" prop="userName" style="width: 450px">
        <el-input v-model="ruleForm.userName" disabled autocomplete="off" />
      </el-form-item>
      <el-form-item label="新密码" prop="password" style="width: 450px">
        <el-input v-model="ruleForm.password" type="password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="再次确认" prop="checkPass" style="width: 450px">
        <el-input v-model="ruleForm.checkPass" type="password" autocomplete="off" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">确认</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { ElMessage, ElLoading } from "element-plus";
import { apiUpdatePwd } from "../../apis/userApi";
import { useRouter } from "vue-router";
import md5 from "js-md5";
const router = useRouter();
const ruleFormRef = ref();


const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('Please input the password'))
  } else {
    if (ruleForm.checkPass !== '') {
      if (!ruleFormRef.value) return
      ruleFormRef.value.validateField('checkPass', () => null)
    }
    callback()
  }
}
const validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('Please input the password again'))
  } else if (value !== ruleForm.password) {
    callback(new Error("Two inputs don't match!"))
  } else {
    callback()
  }
}

const ruleForm = reactive({
  password: '',
  checkPass: '',
  userName: sessionStorage.getItem("userName") || "",
})

const rules = reactive({
  password: [{ validator: validatePass, trigger: 'blur' }],
  checkPass: [{ validator: validatePass2, trigger: 'blur' }],
})

const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      const loading = ElLoading.service({
        lock: true,
        text: "Loading...",
        background: "rgba(0, 0, 0, 0.7)",
      });
      setTimeout(() => {
        apiUpdatePwd({
          userId: sessionStorage.getItem("userId"),
          password: md5(ruleForm.password),
        })
          .then((res) => {
            if (res.code>0) {
              ElMessage({
                message: "修改成功！",
                type: "success",
              });
              router.push("userCenter");
            } else {
              ElMessage({
                message: res.msg,
                type: "error",
              });
            }
          })
          .finally(() => {
            loading.close();
            formEl.resetFields();
          });
      }, 800);
    } else {
      return false;
    }
  })
}
</script>
<style scoped>
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 100px;
}

.form {
  /* height: 500px; */
}
</style>

